<div
  class="flex flex-row items-center group px-1 my-1 hover:bg-gray-100 rounded-sm"
>
  <label
    class="flex-grow flex-shrink truncate cursor-pointer text-gray-900 group-hover:text-black"
  >
    <input
      type="checkbox"
      class="cursor-pointer"
      [ngModel]="selected"
      (ngModelChange)="onSelectedChange($event)"
    />
    {{ label | translate }}
    <span class="text-gray-600 group-hover:text-black">({{ count }})</span>
  </label>
  <div
    *ngIf="!inverted"
    class="flex-shrink-0 cursor-pointer invisible group-hover:visible icon-exclude"
    style="min-width: 20px"
    (click)="toggleInverted()"
  >
    <!-- minus svg -->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 20"
      fill="currentColor"
    >
      <path
        fill-rule="evenodd"
        d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
        clip-rule="evenodd"
      />
    </svg>
  </div>
  <div
    *ngIf="inverted"
    class="flex-shrink-0 cursor-pointer invisible group-hover:visible icon-include"
    style="min-width: 20px"
    (click)="toggleInverted()"
  >
    <!-- check svg -->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 20"
      fill="currentColor"
    >
      <path
        fill-rule="evenodd"
        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
        clip-rule="evenodd"
      />
    </svg>
  </div>
</div>
